<template>
  <div>
    <!-- 入库信息 -->
    <el-form :model="StoreAdd" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
      <el-row :gutter="24">
        <el-col :span="8" :offset="0">
          <el-form-item label="入库单号：" prop="warehousingCode" align="left">
            <el-input v-model="StoreAdd.warehousingCode" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="供应商编号：" prop="supplierCode">
            <el-input v-model="StoreAdd.supplierCode" @focus="dialogTableVisible = true"></el-input>
          </el-form-item>
          <el-form-item label="供应商联系方式：" prop="phone">
            <el-input v-model="StoreAdd.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="入库单类型：" prop="warehousingType" align="left">
            <el-select v-model="StoreAdd.warehousingType" placeholder="请选择入库单类型" clearable>
              <el-option label="全部" :value="0"> </el-option>
              <el-option label="采购收货入库" :value="1"> </el-option>
              <el-option label="销售退货入库" :value="2"> </el-option>
              <el-option label="生产产品入库" :value="3"> </el-option>
              <el-option label="领用退还入库" :value="4"> </el-option>
              <el-option label="借货入库" :value="5"> </el-option>
              <el-option label="借出入库" :value="6"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供应商名称：" prop="supplierName">
            <el-input v-model="StoreAdd.supplierName"></el-input>
          </el-form-item>
          <el-form-item label="制单人：" prop="creator">
            <el-input v-model="StoreAdd.creator"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-form-item label="关联订单号：" prop="unitOrderId" align="left">
            <el-autocomplete v-model="StoreAdd.unitOrderId" :fetch-suggestions="querySearch"></el-autocomplete>
          </el-form-item>
          <el-form-item label="供应商联系人：" prop="contract">
            <el-input v-model="StoreAdd.contract"></el-input>
          </el-form-item>
          <el-form-item label="制单时间：" prop="audittime" align="left">
            <el-date-picker v-model="StoreAdd.audittime" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remarks">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="StoreAdd.remarks">
        </el-input>
      </el-form-item>
    </el-form>
    <!-- 入库产品信息 -->
    <div style="padding: 5px; text-align: right">
      <el-button type="primary" @click="GitInfoProduct()" icon="el-icon-plus">选择产品</el-button>
    </div>
    <div style="padding: 5px; text-align: left">
      <el-table :data="StoreAdd.inWarehouseDetailAdds" border style="width: 100%">
        <el-table-column prop="productName" label="产品名称"> </el-table-column>
        <el-table-column prop="productCode" label="产品编码"> </el-table-column>
        <el-table-column prop="unitName" label="存储单位"> </el-table-column>
        <el-table-column label="批次">
          <template slot-scope="scope">
            <el-input v-model="scope.row.batch" placeholder="请输入批次"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单价">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price" placeholder="请输入单价"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="入库数">
          <template slot-scope="scope">
            <el-input v-model="scope.row.inWarehouseNumber" placeholder="请输入入库数"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="总价">
          <template slot-scope="scope">
            <span>{{ scope.row.inWarehouseNumber * scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 5px; text-align: center">
      <el-button type="primary" @click="AddStoreInfo()">编辑</el-button>
      <el-button plain @click="PushStoreList()">返回</el-button>
    </div>

    <!-- 弹框 -->
    <el-dialog title="选择供应商" :visible.sync="dialogTableVisible">
      <!-- 查询列表 -->
      <div style="padding: 5px; text-align: left">
        <el-form :inline="true" :model="SupplierSelect" class="demo-form-inline">
          <el-form-item label="供应商编号：">
            <el-input v-model="SupplierSelect.supplierCode" placeholder="供应商编号"></el-input>
          </el-form-item>
          <el-form-item label="供应商名称：">
            <el-input v-model="SupplierSelect.supplierName" placeholder="供应商名称"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getSupplierList()" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 数据表 -->
      <el-table :data="Supplier" border style="width: 100%" @selection-change="handleSelectionChange">
        <!-- 列表 -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="supplierCode" label="供应商编号">
        </el-table-column>
        <el-table-column prop="supplierName" label="供应商名称">
        </el-table-column>
        <el-table-column prop="supplierType" label="类型"> </el-table-column>
        <el-table-column prop="phone" label="电话"> </el-table-column>
        <el-table-column prop="fax" label="传真"> </el-table-column>
        <el-table-column prop="email" label="Email"> </el-table-column>
        <el-table-column prop="contacts" label="联系人"> </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
      <div class="block" style="text-align: right">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="SupplierSelect.pageIndex" :page-sizes="[1, 2, 3, 4]" :page-size="SupplierSelect.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="totalCount" next-text="下一页" prev-text="上一页">
        </el-pagination>
      </div>
    </el-dialog>

    <!-- 选择产品弹框 -->
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible1">
      <!-- 查询列表 -->
      <div style="padding: 5px; text-align: left">
        <!-- 产品查询信息 -->
        <el-form :inline="true" :model="ProductListSelect" class="demo-form-inline">
          <el-form-item label="产品编号：">
            <el-input v-model="ProductListSelect.code" placeholder="产品编号"></el-input>
          </el-form-item>
          <el-form-item label="产品名称：">
            <el-input v-model="ProductListSelect.name" placeholder="产品名称"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="GetProduct()" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- 数据列表 -->
        <el-table :data="ProductList" border style="width: 100%" @selection-change="handleSelectionChange1">
          <!-- 列表 -->
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="productCode" label="产品编码">
          </el-table-column>
          <el-table-column prop="productName" label="产品名称">
          </el-table-column>
          <el-table-column prop="specs" label="规格"> </el-table-column>
          <el-table-column prop="packageType" label="类别"> </el-table-column>
          <el-table-column prop="unitName" label="存储单位"> </el-table-column>
          <el-table-column prop="packageType" label="包装类型">
          </el-table-column>
          <el-table-column prop="price" label="单价"></el-table-column>
          <el-table-column prop="weight" label="重量"> </el-table-column>
        </el-table>
        <div class="block" style="text-align: right">
          <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
            :current-page="ProductListSelect.pindex" :page-sizes="[1, 2, 3, 4]" :page-size="ProductListSelect.psaze"
            layout="total, sizes, prev, pager, next, jumper" :total="totalCount" next-text="下一页" prev-text="上一页">
          </el-pagination>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="dialogTableVisible1 = false">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { autoGenerateCode } from "@/utils/utils";
import { GetSupplierManagementDtoDtoAsyne } from "@/api/BasicsDatumServer/BasicsDatumServer";
import {
  ProcureList,
  AddStore,
  InWareBackFill,
  BackFill,
  InWareUpdate,
} from "@/api/WarehouseServer/Store";
import {
  ProductManagementGetList
} from "@/api/BasicsDatumServer/ProductManagement";

export default {
  data() {
    return {
      Id: "",
      ProductList: [],
      inWarehouseDetailAdds: [],
      totalCount: 0,
      totalCount1: 0,
      pageCount: 0,
      List: [],
      dialogTableVisible: false,
      dialogTableVisible1: false,
      StoreAdd: {
        id: "",
        warehousingCode: "",
        warehousingType: 0,
        unitOrderId: "",
        supplierCode: "",
        supplierName: "",
        contract: "",
        phone: "",
        creator: "",
        createTime: new Date(),
        state: 0,
        opinion: "无",
        reviewer: localStorage.getItem("encode"),
        audittime: "",
        remarks: "",
        inWarehouseDetailAdds: [],
      },
      rules: {},
      options: [],
      Supplier: [],
      SupplierSelect: {
        supplierCode: "",
        supplierName: "",
        pageIndex: 1,
        pageSize: 2,
      },
      ProductListSelect: {
        name: "",
        code: "",
        pindex: 1,
        psaze: 2,
        isTrue: 0,
      },
    };
  },
  methods: {
    //反填入库信息
    WareaBackFill() {
      //取传值
      //this.$route.query.id;
      //this.Id = this.$route.query.id;
      var data = {
        id: this.$route.query.id
      };

      InWareBackFill(data).then((res) => {
        this.StoreAdd.id = res.data.id;
        this.StoreAdd.warehousingCode = res.data.warehousingCode;
        this.StoreAdd.warehousingType = res.data.warehousingType;
        this.StoreAdd.unitOrderId = res.data.unitOrderId;
        this.StoreAdd.supplierCode = res.data.supplierCode;
        this.StoreAdd.supplierName = res.data.supplierName;
        this.StoreAdd.contract = res.data.contract;
        this.StoreAdd.createTime = res.data.createTime;
        this.StoreAdd.phone = res.data.phone;
        this.StoreAdd.creator = res.data.creator;
        this.StoreAdd.audittime = res.data.audittime;
        this.StoreAdd.remarks = res.data.remarks;
        this.StoreAdd.state = res.data.state;
        this.StoreAdd.opinion = res.data.opinion;
        this.StoreAdd.reviewer = res.data.reviewer;
      });
      BackFill(data).then((res) => {
        this.StoreAdd.inWarehouseDetailAdds = res.data;
      });
    },
    handleDelete(Id) {
      //console.log(row.address, row.contacts, row.phone);
      //判断是否有数据
      if (this.StoreAdd.inWarehouseDetailAdds.length == 0) {
        this.$message({
          message: "必须存在一条联系人信息",
          type: "warning",
        });
        return;
      } else {
        this.StoreAdd.inWarehouseDetailAdds.pop();
      }
    },
    //添加仓库管理
    AddStoreInfo() {
      InWareUpdate(this.StoreAdd).then((res) => {
        if (res.data.data) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.$router.push({ path: "StoreList" });
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    PushStoreList() {
      this.$router.push({ path: "StoreList" });
    },
    handleSelectionChange1(val) {
      this.StoreAdd.inWarehouseDetailAdds = val;
    },

    //产品表
    ProductManagementGetList() {
      var data = {
        productCode: this.ProductListSelect.code,
        productName: this.ProductListSelect.name,
        productTypeId: this.ProductListSelect.isTrue,
        pageIndex: this.ProductListSelect.pindex,
        pageSize: this.ProductListSelect.psaze
      };

      ProductManagementGetList(data).then((res) => {
        this.ProductList = res.data.data.result;
        this.totalCount1 = res.data.data.totalCount;
      });
    },
    //选择产品
    GitInfoProduct() {
      this.dialogTableVisible1 = true;
    },
    handleSelectionChange(val) {
      this.List = {};
      if (this.List.length == 1) {
        this.$message.error("只能选择一条数据");
        return;
      }
      this.List = val;
      this.dialogTableVisible = false;
      this.StoreAdd.supplierCode = this.List[0].supplierCode;
      this.StoreAdd.supplierName = this.List[0].supplierName;
      this.StoreAdd.contract = this.List[0].contacts;
      this.StoreAdd.phone = this.List[0].phone;
    },
    //反填入库编号
    getCodeBackFill() {
      this.StoreAdd.warehousingCode = autoGenerateCode("RK");
    },
    //联想输入
    querySearch(queryString, cb) {
      var options = this.options;
      var results = queryString
        ? options.filter(this.createFilter(queryString))
        : options;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (options) => {
        return (
          options.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    //获取采购编号
    ProcureList() {
      ProcureList().then((res) => {
        this.options = Array.from(res.data, (item) => {
          return { value: item.procurementCode };
        });
        console.log(this.options);
      });
    },
    //获取供应商列表
    GetSupplierList() {
      var data = {
        supplierCode: this.SupplierSelect.supplierCode,
        supplierName: this.SupplierSelect.supplierName,
        pageSize: this.SupplierSelect.pageSize,
        pageIndex: this.SupplierSelect.pageIndex,
      };

      GetSupplierManagementDtoDtoAsyne(data).then((res) => {
        this.Supplier = res.data.list.data.result;
        this.pageCount = res.data.pageCount;
        this.totalCount = res.data.totalCount;
      });
    },
    //修改每页显示条数
    handleSizeChange(val) {
      this.SupplierSelect.pageSize = val;
      this.GetSupplierList();
    },
    //修改每页页数
    handleCurrentChange(val) {
      this.SupplierSelect.pageIndex = val;
      this.GetSupplierList();
    },
    //修改每页显示条数
    handleSizeChange1(val) {
      this.ProductListSelect.psaze = val;
      this.GetProduct();
    },
    //修改每页页数
    handleCurrentChange1(val) {
      this.ProductListSelect.pindex = val;
      this.GetProduct();
    },
  },
  created() {
    this.WareaBackFill();

    this.getCodeBackFill();
    this.ProcureList();
    this.GetSupplierList();
    this.GetProduct();

    this.ProductManagementGetList();
  },
};
</script>
<style></style>